<template>
  <div
    class="rounded-lg bg-[#2f4553] pt-4 p-2 overflow-y-auto banckDetil"
    v-if="!showRechargeMonyItemIfrom"
  >
    <div>
      {{ $t("layer.wallet.depositMethod") }}
    </div>
    <div
      class="mt-1 bg-[#1f2937] p-1 px-3 rounded flex justify-between items-center"
      @click="goBack"
    >
      <div>
        {{ rechargeMonyItem.channel_name }}
      </div>
      <div class="flex items-center">
        <div class="mr-2 p-2" v-if="rechargeMonyItem.reward.type">
          <!-- rate 百分比 -->
          <!-- static 固定值 -->
          <div
            class="bgc_log text-xs"
            v-if="rechargeMonyItem?.reward?.type != 'none'"
          >
            <span v-if="rechargeMonyItem?.reward?.type == 'static'">
              + {{ rechargeMonyItem?.reward?.data?.value }}
            </span>
            <span v-if="rechargeMonyItem?.reward?.type == 'rate'">
              {{ rechargeMonyItem?.reward?.data?.value }} %
            </span>
          </div>
        </div>
        <div>
          <svg
            width="18"
            height="18"
            viewBox="0 0 48 48"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M36 18L24 30L12 18"
              stroke="#fff"
              stroke-width="4"
              stroke-linecap="round"
              stroke-linejoin="round"
            />
          </svg>
        </div>
      </div>
    </div>

    <div class="mt-2 text-xs text-[#c9d1e4]">
      {{ $t("layer.wallet.rechargeAmount") }}：
      {{ rechargeMonyItem?.scene_list[0]?.once_min_limit }} ——
      {{ rechargeMonyItem?.scene_list[0]?.once_max_limit }}
    </div>

    <div v-if="rechargeMonyItem.type == 'offlineTransfer'" class="mt-4">
      <div class="mt-2 text-[#dbdbdb] text-sm">
        {{ $t("layer.wallet.Step 1") }}：
      </div>
      <div class="bg-[#1f2937] mt-1 rounded p-2 py-4 text-xs md:text-sm">
        <div class="flex justify-between items-center">
          <div class="text-[#c9d1e4]">
            {{ $t("layer.wallet.payee") }}
          </div>
          <div>
            {{ rechargeMonyItem.holder_name }}
          </div>
        </div>
        <div class="flex justify-between items-center mt-2">
          <div class="text-[#c9d1e4]">
            {{ $t("layer.wallet.cardnumber") }}
          </div>
          <div class="flex">
            <div>
              {{ rechargeMonyItem.bank_card_number }}
            </div>
            <div
              class="px-[4px] text-[#c9d1e4] py-[2px] rounded bg-[#2f4553] ml-2 cursor-pointer"
              v-copy="rechargeMonyItem.bank_card_number"
              @click="copyInfo"
            >
              {{ $t("layer.wallet.copy") }}
            </div>
          </div>
        </div>
        <div class="flex justify-between items-center mt-2 mb-2">
          <div class="text-[#c9d1e4]">
            {{ $t("layer.wallet.Bankcode") }}
          </div>
          <div class="flex">
            <div>
              {{ rechargeMonyItem.bank_code }}
            </div>
            <div
              class="px-[4px] text-[#c9d1e4] py-[2px] rounded bg-[#2f4553] ml-2 cursor-pointer"
              v-copy="rechargeMonyItem.bank_code"
              @click="copyInfo"
            >
              {{ $t("layer.wallet.copy") }}
            </div>
          </div>
        </div>
        <div class="flex justify-between items-center">
          <div class="text-[#c9d1e4]">
            {{ $t("layer.wallet.BankAddress") }}
          </div>
          <div>
            {{ rechargeMonyItem.address }}( {{ rechargeMonyItem.branch_name }})
          </div>
        </div>
      </div>
      <div class="mt-4 text-[#dbdbdb] text-sm">
        {{ $t("layer.wallet.Step 2") }}
        <div class="mt-2">
          <el-input v-model="walletInfo" @input="changeInputVal">
            <template #append>
              <span class="text-xs md:text-sm text-yellow-100">
                {{ $t("layer.wallet.additional") }} + {{ main.currency }}
                {{ giftMony }}
              </span>
            </template>
          </el-input>
        </div>
      </div>
      <div class="mt-4 text-[#dbdbdb] text-sm">
        {{ $t("layer.wallet.Step 3") }}
        <imgUploader @setImgUrl="getImgUrl" />
      </div>
    </div>
    <div v-else>
      <div class="mt-4 bg-[#1f2937] rounded flex justify-between items-center">
        <el-input v-model="walletInfo" @input="changeInputVal">
          <template #append>
            <span class="text-xs md:text-sm text-yellow-100">
              {{ $t("layer.wallet.additional") }} + {{ main.currency }}
              {{ giftMony }}
            </span>
          </template>
        </el-input>
      </div>

      <activeTab
        class="mt-4"
        :tabDataList="tabDataList"
        @changeActiveTabVal="getChangeActiveTabVal"
      />
    </div>

    <div class="mt-4">
      <button class="w-full bg-[#1475e1] p-2 rounded" @click="submitFrom">
        {{ rechargeMonyItem.channel_name }}
        {{ $t("layer.wallet.deposit") }}
        ( {{ main.currency }} )
      </button>
    </div>
    <!-- <div class="sumitOfflineTransfer" v-else>
      <button class="w-full bg-[#1475e1] p-2 rounded" @click="submitFrom">
        {{ rechargeMonyItem.channel_name }}
        {{ $t("layer.wallet.deposit") }}
      </button>
    </div> -->
  </div>
  <div v-else class="max-h-[500px] min-h-[400px] overflow-y-auto">
    <iframe
      :src="iframeSrc"
      frameborder="0"
      style="width: 100%; height: 100%; min-height: 700px; zoom: 0.5"
    ></iframe>
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref, onMounted, computed } from "vue";
import { ElNotification } from "element-plus";
import activeTab from "./activeTab.vue";
import { mainAct } from "@/store/activeda";
import { mainWallet } from "@/store/wallet";
import { useI18n } from "vue-i18n";
import { onlineDeposit, offlineDeposit } from "@/api/wallet.js";
import imgUploader from "@/components/img/imgUploader.vue";

const { t } = useI18n();
const props = defineProps(["rechargeMonyItem"]);
const walletShow = mainWallet();
const main = mainAct();
const walletInfo = ref("");

const emit = defineEmits(["goBack"]);
const goBack = () => {
  emit("goBack", "rechargeList");
};

const showRechargeMonyItemIfrom = ref(false); // 手机端是否显示充值页面
const iframeSrc = ref("");
// 获取切换tab值
const getChangeActiveTabVal = (val: any) => {
  walletInfo.value = val;
};

// 限制不能输入小数点
const changeInputVal = () => {
  let val = Math.floor(
    Number(props.rechargeMonyItem?.scene_list[0]?.once_max_limit)
  );
  walletInfo.value = walletInfo.value.replace(/[^\d]/g, "");

  if (val < Number(walletInfo.value)) {
    walletInfo.value = val;
  }
};

const submitFrom = async () => {
  console.log(walletInfo, props.rechargeMonyItem);
  let sceneObj = props.rechargeMonyItem?.scene_list[0];
  let min = Number(sceneObj.once_min_limit);
  let max = Number(sceneObj.once_max_limit);
  let amount = Number(walletInfo.value);
  if (amount >= min && amount <= max) {
    // 线下充值
    if (props.rechargeMonyItem.type == "offlineTransfer") {
      subOfflineRecharge();
    } else {
      // 线上充值
      let data = {
        channel_id: props.rechargeMonyItem.channel_id,
        scene: sceneObj.scene_code,
        amount: String(walletInfo.value)
      };

      console.log(data);
      let res: any = await onlineDeposit(data);
      console.log(res);
      if (res.errno == 0) {
        if (res.data.type == "jump_page") {
          if (main.isApp) {
            iframeSrc.value = res.data.info.url;
            showRechargeMonyItemIfrom.value = true;
          } else {
            window.open(res.data.info.url, "_blank");
          }
          iframeSrc.value = res.data.info.url;
          showRechargeMonyItemIfrom.value = true;
        }
        // ElNotification({
        //   position: "top-left",
        //   zIndex: 1015,
        //   title: "Success",
        //   message: "recharge succeeded",
        //   type: "success"
        // });
      }
    }
  } else {
    console.log("未通过", amount, min, amount, max);
    ElNotification({
      position: "top-left",
      zIndex: 1015,
      title: "Error",
      message: t("layer.wallet.rechargelimit"),
      type: "error"
    });
    return false;
  }
};

//线下充值
const subOfflineRecharge = async () => {
  let data = {
    bank_card_id: props.rechargeMonyItem.bank_card_id,
    amount: walletInfo.value,
    remark: "",
    proof: imgUrl.value,
    is_participate_active: ""
  };
  let res: any = await offlineDeposit(data);
  if (res.errno == 0) {
    ElNotification({
      position: "top-left",
      zIndex: 1015,
      title: "Success",
      message: t("layer.wallet.operationSuccessful"),
      type: "success"
    });
    emit("goBack", "rechargeList");
  }

  // console.log(res);
};

const tabDataList = ref([]);
const imgUrl = ref("");

const giftMony = computed(() => {
  let mony = 0;
  let value = props.rechargeMonyItem?.reward?.data?.value / 100;
  switch (props.rechargeMonyItem?.reward?.type) {
    case "static":
      mony = props.rechargeMonyItem?.reward?.data?.value;
      break;
    case "rate":
      // 1. 当输入金额大于最大充值限额时，显示最大充值限额的奖励优惠
      if (
        Number(walletInfo.value) >
        Number(props.rechargeMonyItem?.scene_list[0]?.once_max_limit)
      ) {
        // mony = Math.floor( parseFloat(props.rechargeMonyItem?.scene_list[0]?.once_max_limit) );
        mony = (
          Number(props.rechargeMonyItem?.scene_list[0]?.once_max_limit) * value
        ).toFixed(2);
      } else {
        // 2. 当输入金额小于最大充值限额时，显示输入金额的奖励优惠
        let wallets = Number(walletInfo.value) * value;
        mony = wallets.toFixed(2);
      }
      break;
  }
  return mony;
});

const getImgUrl = val => {
  imgUrl.value = val;
};

const copyInfo = () => {
  ElNotification({
    position: "top-left",
    zIndex: 1015,
    title: "Success",
    message: t("layer.wallet.operationSuccessful"),
    type: "success"
  });
};
onMounted(() => {
  tabDataList.value = walletShow.banckDetails?.deposit_amount_list;
});
</script>

<style lang="scss" scoped>
.bgc_log {
  width: 60px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: url("@/assets/right_log.png") no-repeat;
  background-size: 100% 100%;
}
:deep(.el-input__wrapper) {
  color: #fff;
  background: #1f2937;
}
:deep(.el-input-group__append) {
  color: #1475e1;
  background-color: #1f2937;
}
:deep(.el-input) {
  --el-input-focus-border: none;
  --el-input-border-color: none;
}
:deep(.el-input__inner) {
  color: #fff;
}
:deep(.el-input-group__prepend) {
  color: #1475e1;
  background-color: #1f2937;
}

@media screen and (min-width: 601px) {
  .banckDetil {
    max-height: 590px;
  }
}

@media screen and (max-width: 600px) {
  .banckDetil {
    max-height: 480px;
    margin-bottom: 10px;
  }
}
</style>
